<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>天气预报网</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        * {
            box-sizing: border-box;
        }

        ul,
        li {
            list-style: none;
            /*去黑点*/
            margin: 0px;
            /*外边距*/
            padding: 0px;
            /*内边距*/
        }

        li {
            border: 1px solid #d4d4d4;
            /* 设置边框 */
            text-align: center;
            /* 居中 */
            border-radius: 20px;
            /*设置边框圆角*/
        }

        li p {
            text-align: center;
            /*居中*/
        }

        li:first-child {
            background-color: rgba(199, 166, 4, 0.1);
            /*设置背景颜色rgba透明度为0.1*/
        }

        @keyframes anima {

            /*定义动画效果*/
            from {
                /*开始的角度*/
                transform: rotate(0deg);
                /*角度从0开始*/
            }

            to {
                /*结束的角度*/
                transform: rotate(360deg);
                /*360结束*/
            }
        }

        li:first-child img:hover {
            animation-name: anima;
            /*定义播放的动画的名字*/
            animation-duration: 10s;
            /*动画播放时间*/
            animation-iteration-count: infinite;
            /*定义动画播放时间，次数为无限*/
        }

        /* 定义自定义字体 */
        @font-face {
            font-family: cssFont;
            src: url('font/1.ttf');
        }

        /* 使用 :first-child 伪类选择今天的p标签 */
        li:first-child p {
            font-family: cssFont;
        }

        ul {
            display: -webkit-flex;
            display: flex;
            /*设置弹性布局盒子*/
        }

        li {
            /*弹性盒子分配自适应比例，为1时等比分配*/
            flex-grow: 1;
        }

        #news {
            column-count: 3;
            /*分为3列*/
            column-gap: 50px;
            /*中间的间隔*/
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <p>今天</p>
            <img src="images/weather1.png">
            <p>晴天</p>
        </li>
        <li>
            <p>明天</p>
            <img src="images/weather2.png">
            <p>阴天</p>
        </li>
        <li>
            <p>后天</p>
            <img src="images/weather3.png">
            <p>小雨</p>
        </li>
    </ul>
    <div id="news">
        <div>今天天气晴<br />气温35°C<br />出门注意防晒</div>
        <div>明天阴天<br />气温28°C<br />适合室外活动</div>
        <div>后天小雨<br />气温27°C<br />出门记得带伞</div>
    </div>
</body>
<script>
    //https://www.tianapi.com/apiview/72
    //天气接口地址：：https://www.tianapi.com/apiview/72 接口Key值：7db75f0a8b9e89d93762b622eea1a8f0
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
            var weather = JSON.parse(xmlhttp.responseText);//将服务器端返回的字符串转换为json对象。
            console.log(weather)
            var pics = document.getElementsByTagName("ul")[0].getElementsByTagName("li");
            var news = document.getElementById("news").getElementsByTagName("div");
            var img = null;
            for (var i = 0; i < 3; i++) {  //循环填充今天、明天和后天的天气情况
                img = pics[i].getElementsByTagName("img")[0];
                pics[i].getElementsByTagName("p")[1].innerText = weather.result.list[i].date;
                pics[i].getElementsByTagName("p")[1].innerText = weather.result.list[i].weather;
                switch (weather.result.list[i].weather) {
                    case "晴天":
                        img.src = "images/weather1.png";
                        break;
                    case "阴天":
                        img.src = "images/weather2.png";
                        break;
                    case "小雨":
                        img.src = "images/weather3.png";
                        break;
                }
                news[i].innerHTML = weather.result.list[i].date + weather.result.list[i].weather + "<br/>气温" + weather.result.list[i].real + "<br/>" + weather.result.list[i].tips;
            }
        }
    }
    xmlhttp.open("GET", "https://apis.tianapi.com/tianqi/index?key=7db75f0a8b9e89d93762b622eea1a8f0&city=广州&type=7", true);
    xmlhttp.send();
</script>

</html>